<template>
	<view>
		<view class="register-pblist">
			<searchBtnVue @search='onSearch' placeholder="搜索医生"></searchBtnVue>
			<DateList v-if="allPbDate" :dateNum="dateNum" :canAva="allPbDate" @change='onDate' :key="childKey" />
			<view class="doc-title">
				<view>{{ deptItem.name }}</view>
				<view class="center">
					<view class="mar-5" @click="handleCheck">只看有号</view>
					<u-switch v-model="checked" size="30" active-color="#44cfda" @change="handleChange"></u-switch>
				</view>
			</view>
			<view class="register-pblist-main">
				<view class="doctor-list-main">
					<view v-for="(item,index) in pbList" :key="index" class="doctor-list-main-item">
						<view class="doctor-list-main-item-box flexR">
							<view class="img">
								<image v-if="item.headImg" :src="hostApi+item.headImg"></image>
								<image src="/static/images/hospital/defaultDoctor.png"></image>
							</view>
							<view class="flex-1 align-between">
								<view class="between">
									<view class="flex-1">
										<text class="doctor-name">{{item.doctorName}}</text>
										<text class="job-title">{{item.doctorTitle}}</text>
									</view>
									<!-- 可挂号总数waitRegisterTotal -->
									<view class="have-num" v-if="item.waitRegisterTotal!=0">
										<view>{{item.sitTypeName}}</view>
										<view>有号</view>
									</view>
									<view class="no-num" v-else>
										<view>{{item.sitTypeName}}</view>
										<view>满号</view>
									</view>
								</view>
								<!-- 								<view>
									{{item.scheduleDate+' '+item.sitTypeStr+' '+item.beginTime+'~'+item.endTime+'  '+item.waitRegisterTotal}}
								</view> -->
								<view>
									<view class="over-2 doctorSpecialty">{{item.doctorSpecialty}}</view>
								</view>
								<view class="flex-end">
									<view class="btn-register" @click="toPage(item)">挂号</view>
								</view>
							</view>

						</view>
					</view>
				</view>

				<!-- 内容为空 -->
				<view v-if="pbList.length===0&& !load" style="height: 100%;padding-top:10rpx;">
					<view style="background-color: #fff;height: 100%;">
						<u-empty text="暂无排班信息列表" mode="list"></u-empty>
					</view>
				</view>
			</view>
		</view>
		<LoadVue :load="load"></LoadVue>
	</view>
</template>

<script>
	import DateList from '../../components/DateList/index.vue'
	import searchBtnVue from '../../components/Search/searchBtn.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		doctorScheduling
	} from '@/api/doctor.js'
	import dayjs from 'dayjs'
	import {
		doctorNumList
	} from '../../utils/testDoctorNum'
	import {
		listSitType
	} from '../../utils/listSitType'
	import {
		dictionarySelect
	} from '../../api/dictionary'
	export default {
		components: {
			DateList,
			searchBtnVue,
		},
		data() {
			return {
				childKey: 1, //用于强制刷新子组件
				pbList: [],
				listSitType: listSitType,
				pbListAll: [],
				allPbDate: null,
				oldPbList: [], //旧的排班数据，直接查询的数据
				deptCode: '',
				doctorCode: '',
				startDate: '',
				endDate: '',
				load: true,
				deptItem: {}, //科室信息
				checked: true,
				haveNum: true, //是否有号源
				name: '', //搜索医生
				dateNum: 15, //默认可预约天数
			}
		},
		computed: {
			...mapGetters(['hostApi'])
		},
		mounted() {
			this.deptItem = uni.getStorageSync("deptItem")
			this.getAllDate()
		},
		methods: {
			handleChange() {
				if (this.checked) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.waitRegisterTotal !=
						0);
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},
			// 只看有号的
			handleCheck() {
				this.checked = !this.checked
				if (this.checked) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.waitRegisterTotal !=
						0);
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},

			initData() {
				let params = {
					deptCode: this.deptItem.code,
					doctorCode: this.deptItem.doctorCode,
					endDate: this.endDate,
					beginDate: this.startDate,
				}
				this.load = true;
				doctorScheduling(params).then(res => {
					if (res.length > 0) {
						res.forEach(item => {
							this.getSitTypeName(item)
						});
						this.pbListAll = res;
						this.onDate({
							startDate: res[0].schDate,
							endDate: res[0].schDate
						})
					} else {
						// this.pbListAll = doctorNumList;
					}
					this.getAllPbDate(this.pbListAll)
				}).catch(e => {
					this.pbListAll = []
					this.pbList = []
				}).finally(() => {
					this.load = false
				})

			},
			// 得到数组里面的所有日期有号源的信息日期
			getAllPbDate(list) {
				let obj = {};
				for (let i = 0; i < list.length; i++) {
					if (!obj[list[i].schDate]) {
						obj[list[i].schDate] = 1
					} else {
						obj[list[i].schDate] = obj[list[i].schDate] + 1
					}
				}
				this.allPbDate = obj
			},
			// 计算每日是否还有号源（未完
			getAllDate() {
				dictionarySelect({
					code: 'canReserveDays'
				}).then(res => {
					if (res.length > 0) {
						this.dateNum = parseInt(res[0].describe)
					}
					this.endDate = dayjs().add(this.dateNum, 'day').format('YYYY-MM-DD')
					this.startDate = dayjs().format('YYYY-MM-DD')
					this.initData()
				})

			},
			onDate(val) {
				// 在已经查询的数据去筛选
				this.startDate = val.startDate
				this.endDate = val.endDate
				if (this.name) {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.doctorName.includes(
						this.name));
				} else {
					this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate);
				}
			},
			onSearch(val) {
				this.name = val;
				this.pbList = this.pbListAll.filter(item => item.schDate == this.startDate && item.doctorName.includes(
					this.name));
			},
			toPage(item) {
				if (item.waitRegisterTotal == 0) {
					uni.showToast({
						title: '当前无可预约号源',
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.navigateTo({
						url: `/pages/Introduce/doctor?code=` + item.doctorCode
					})
				}
			},
			getSitTypeName(e) {
				listSitType.forEach(item => {
					if (item.type == parseInt(e.sitType)) {
						return e.sitTypeName = item.name
					}
				})
				return 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.have-num {
		display: flex;
		justify-content: flex-start;
		border-radius: 16px 0 0 16px;
		background-color: rgb(208, 243, 246);
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 11px;
		color: #2E6D78;
		line-height: 17px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 5px 10px;

	}

	.no-num {
		display: flex;
		justify-content: flex-start;
		border-radius: 16px 0 0 16px;
		background: #999999;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 11px;
		color: #FFFFFF;
		line-height: 17px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 5px 10px;
	}

	.doc-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
		border-radius: 16rpx;
		border: 1px solid #CEF4F7;
		margin: 0 16rpx;
	}

	.doctor-name {
		height: 24px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #000000;
		line-height: 24px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.job-title {
		color: gray;
		margin: 0 10px;
		font-size: 10px;
	}

	.doctorSpecialty {
		font-size: 12px;
	}

	.register-pblist {
		height: 359px;
		background: linear-gradient(170deg, #e8f8fa 0%, #f8fdfd 53%, #FFFFFF 100%);
		border-radius: 0px 0px 0px 0px;

		.register-pblist-main {
			// 110rpx 搜索框宽度 120 时间列表宽度 4 是弹性
			height: calc(100vh - 110rpx - 120rpx - 180rpx);
			overflow: scroll;

			.register-pblist-main-item {
				background-color: $uni-bg-color;
				margin-top: 10rpx;
				padding: 40rpx 0 30rpx 0;
				position: relative;

			}
		}
	}
</style>

<style lang="scss" scoped>
	.doctor-list-main-item {
		background: #FFFFFF;
		padding-bottom: 24rpx;
		border: 1px solid rgba(235, 235, 235, 0.8);
		margin: 16rpx;
		border-radius: 16rpx;

		.doctor-list-main-item-box {
			background-color: $uni-bg-color;
			padding: 24rpx 24rpx;
			border-radius: 8upx;

			>.img {
				width: 70px;
				height: 70px;
				overflow: hidden;
				margin-right: 30rpx;

				>image {
					width: 70px;
					height: 70px;
					border-radius: 8upx;
				}
			}

			>.doctor-list-main-item-right {
				flex: 1;

				>view {
					margin-bottom: 10upx;
				}

				.doctor-list-main-item-right-title {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					justify-content: space-between;
					font-weight: bold;
					margin-bottom: 10rpx;

					>.title-left {
						.name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32upx;
							color: rgba(0, 0, 0, 0.7);
						}

						.tag {
							// font-size: 24rpx;
							// font-weight: 100;
							// color: $text-color;
							// background-color: $tag-color;
							// height: 36rpx;
							// line-height: 36rpx;
							// padding: 7rpx 17rpx;
							// border-radius: 5rpx;
							// margin-left: 10rpx;

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24upx;
							color: rgba(0, 0, 0, 0.4);
							margin-left: 16upx;
						}
					}

					.right {
						width: 160upx;
						float: right;
						// padding: 0 32upx;
						background-color: #FFF;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: $theme-color;
						border: 1px solid $theme-color;
						border-radius: 8upx;
						transform: translateY(-10upx);
						text-align: center;
					}
				}

				>.row {
					>text {
						// color: $theme-color-light;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: rgba(0, 0, 0, 0.7);
					}
				}

				.sc {
					// height: 40px;
					// line-height: 20px;
					// font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box; // 作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
					-webkit-line-clamp: 1; // 显示的行
				}

				.num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20upx;

					>text {
						&:nth-child(1) {
							color: #FFAA32;
						}

						&:nth-child(2) {
							color: #5DD2B1;
							margin-left: 20upx;
						}

						&:nth-child(3) {
							color: #FF7F7F;
							margin-left: 20upx;
						}
					}

				}
			}
		}
	}

	.btn-register {
		width: 64px;
		background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
		border-radius: 17px 17px 17px 17px;

		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 15px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		padding: 5px 10px;
		margin: 5px 10px;
	}
</style>